<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Speakers</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Speakers</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-grid fixed>
    <ion-row>
      @for (speaker of speakers; track speaker.id) {
      <ion-col size="12" size-md="6">
        <ion-card class="speaker-card">
          <ion-card-header>
            <ion-item
              detail="false"
              lines="none"
              class="speaker-item"
              routerLink="/app/tabs/speakers/speaker-details/{{speaker.id}}"
            >
              <ion-avatar slot="start">
                <img
                  [src]="speaker.profilePic"
                  [alt]="speaker.name + ' profile picture'"
                />
              </ion-avatar>
              <ion-label>
                <h2>{{speaker.name}}</h2>
                <p>{{speaker.title}}</p>
              </ion-label>
            </ion-item>
          </ion-card-header>

          <ion-card-content>
            <ion-list lines="none">
              @for (session of speaker.sessions; track session.id) {
              <ion-item
                detail="false"
                routerLink="/app/tabs/speakers/session/{{session.id}}"
              >
                <ion-label>
                  <h3>{{session.name}}</h3>
                </ion-label>
              </ion-item>
              }

              <ion-item
                detail="false"
                routerLink="/app/tabs/speakers/speaker-details/{{speaker.id}}"
              >
                <ion-label>
                  <h3>About {{speaker.name}}</h3>
                </ion-label>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>
      </ion-col>
      }
    </ion-row>
  </ion-grid>
</ion-content>
